<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>amCharts examples</title> 
        <link rel="stylesheet" href="style.css" type="text/css">
        <script src="../../amcharts/javascript/amcharts.js" type="text/javascript"></script>
        <script src="../../amcharts/javascript/raphael.js" type="text/javascript"></script>        
	    
        <script type="text/javascript">

        var chart;

        var chartData = [
				{year:"2003",europe:2.5,namerica:2.5,asia:2.1,lamerica:0.3,meast:0.2,africa:0.1},
				{year:"2004",europe:2.6,namerica:2.7,asia:2.2,lamerica:0.3,meast:0.3,africa:0.1},
				{year:"2005",europe:2.8,namerica:2.9,asia:2.4,lamerica:0.3,meast:0.3,africa:0.1}];

         window.onload = function() {
            chart = new AmCharts.AmSerialChart();
            chart.dataProvider = chartData;
            chart.categoryField = "year";
            chart.marginLeft = 47;
            chart.marginTop = 30;
			chart.plotAreaBorderAlpha = 0.2;
			chart.rotate = true;

			var graph = new AmCharts.AmGraph();
			graph.title = "Europe";
			graph.labelText="[[value]]";
			graph.valueField = "europe";
			graph.type = "column";
			graph.lineAlpha = 0;
			graph.fillAlphas = 1;
			graph.lineColor = "#C72C95";
			chart.addGraph(graph);

			var graph = new AmCharts.AmGraph();
			graph.title = "North America";
			graph.labelText="[[value]]";
			graph.valueField = "namerica";
			graph.type = "column";
			graph.lineAlpha = 0;
			graph.fillAlphas = 1;
			graph.lineColor = "#D8E0BD";
			chart.addGraph(graph);

			var graph = new AmCharts.AmGraph();
			graph.title = "Asia-Pacific";
			graph.labelText="[[value]]";
			graph.valueField = "asia";
			graph.type = "column";
			graph.lineAlpha = 0;
			graph.fillAlphas = 1;
			graph.lineColor = "#B3DBD4";
			chart.addGraph(graph);

			var graph = new AmCharts.AmGraph();
			graph.title = "Latin America";
			graph.labelText="[[value]]";
			graph.valueField = "lamerica";
			graph.type = "column";
			graph.lineAlpha = 0;
			graph.fillAlphas = 1;
			graph.lineColor = "#69A55C";
			chart.addGraph(graph);

			var graph = new AmCharts.AmGraph();
			graph.title = "Middle-East";
			graph.labelText="[[value]]";
			graph.valueField = "meast";
			graph.type = "column";
			graph.lineAlpha = 0;
			graph.fillAlphas = 1;
			graph.lineColor = "#B5B8D3";
			chart.addGraph(graph);

			var graph = new AmCharts.AmGraph();
			graph.title = "Africa";
			graph.labelText="[[value]]";
			graph.valueField = "africa";
			graph.type = "column";
			graph.lineAlpha = 0;
			graph.fillAlphas = 1;
			graph.lineColor = "#F4E23B";
			chart.addGraph(graph);

			var valAxis = new AmCharts.ValueAxis();
			valAxis.stackType = "regular";
			valAxis.gridAlpha = 0.1;
			valAxis.axisAlpha = 0;
			chart.addValueAxis(valAxis);

			var catAxis = chart.categoryAxis;
			catAxis.gridAlpha = 0.1;
			catAxis.axisAlpha = 0;
			catAxis.gridPosition = "start";

			var legend = new AmCharts.AmLegend();
			legend.position = "right";
			legend.borderAlpha = 0.2;
			legend.horizontalGap = 10;
			legend.switchType = "v";
			chart.addLegend(legend);

			chart.write("chartdiv");
		}

		// this function is called when user changes type by clicking on radio buttons
		function setType(){

			if(document.getElementById("rb1").checked){
				chart.rotate = true;
			}
			else{
				chart.rotate = false;
			}
			chart.validateNow();
		}

	    </script>

    </head>

	<body>
		<div id="chartdiv" style="width: 100%; height: 400px;"></div>
		<input type="radio" checked="true" name="group" id="rb1" onclick="setType()"> bars
		<input type="radio" name="group" id="rb2" onclick="setType()"> columns
	</body>
</html>


